<template>
  <el-form :model="userInfo" :rules="rules" ref="userInfo" label-width="100px">
    <el-form-item label="真实姓名" prop="full_name">
      <el-input v-model.trim="userInfo.full_name" />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio v-model.number="userInfo.sex" :label="1">男</el-radio>
      <el-radio v-model.number="userInfo.sex" :label="2">女</el-radio>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="userInfo.age" />
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model.number="userInfo.phone" />
    </el-form-item>
    <el-form-item label="身份证" prop="idCard">
      <el-input v-model.number="userInfo.idCard" />
    </el-form-item>
    <el-form-item label="家庭住址" prop="address">
      <el-input v-model="userInfo.address" />
    </el-form-item>
    <el-form-item label="修改密码" label-width="100px" prop="password">
      <el-input placeholder="请输入密码" v-model="userInfo.password" show-password />
    </el-form-item>
    <el-form-item label="确认修改密码" label-width="100px" prop="repassword">
      <el-input placeholder="请再次输入密码" v-model="userInfo.repassword" show-password />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="updateUserInfo">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'Profile',
    data() {
      // 自定义校验规则
      // 密码
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.userInfo.repassword !== '') {
            this.$refs.userInfo.validateField('repassword')
          }
          callback()
        }
      }
      // 确认密码
      let validateRePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.userInfo.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        userInfo: {},
        rules: {
          full_name: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' },
            { min: 2, max: 4, message: '长度在 2 到 5 个字符', trigger: 'blur' },
          ],
          age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
          sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
          idCard: [{ required: true, message: '请输入身份证号码', trigger: 'change' }],
          address: [{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
          password: [
            {
              validator: validatePass,
              trigger: 'blur',
            },
            {
              min: 6,
              message: '长度不能小于6',
              trigger: 'blur',
            },
          ],
          repassword: [
            { validator: validateRePass, trigger: 'blur' },
            {
              min: 6,
              message: '长度不能小于6',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    mounted() {
      this.getUserInfo()
    },
    methods: {
      ...mapActions('user', ['reqUserInformation', 'reqUpdateUserInformation']),
      ...mapMutations('user', ['CLEAR']),
      // 获取信息并设置
      async getUserInfo() {
        try {
          await this.reqUserInformation()
          let userInfo = this.$store.state.user.userInfo
          this.userInfo = userInfo
        } catch (error) {
          this.$message.error('获取信息失败')
        }
      },
      // 获取信息并设置
      updateUserInfo() {
        this.$refs.userInfo.validate(async valid => {
          if (valid) {
            try {
              let { full_name, age, sex, phone, idCard, address, _id, password } = this.userInfo
              let data = { full_name, age, sex, phone, idCard, address, _id, password }
              if (!password?.trim()) delete data.password
              await this.reqUpdateUserInformation(data)
              this.$message.success('保存成功')
              if (data.password) {
                this.$message.success('密码修改成功，请重新登录')
                // 退出登录
                this.CLEAR()
                console.log(this.$router.push)
                this.$router.push(`/login?redirect=${this.$route.path}`)
              } else {
                this.getUserInfo()
              }
            } catch (error) {
              this.$message.error('保存失败')
            }
          } else {
            return this.$message.error('请按照要求正确输入！')
          }
        })
      },
    },
  }
</script>

<style scoped></style>
